﻿<template>
    <div class="person">
    <h2>姓名:{{ person.name }}</h2>
    <h2>年龄:{{ person.age }}</h2>
    <h2>汽车:{{ person.car.c1 }}、{{ person.car.c2 }}</h2>
    <button @click="changeName">修改姓名</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeFCar">修改第一台车</button>
    <button @click="changeSCar">修改第二台车</button>
    <button @click="changeCar">修改车</button>
   </div>
</template>



<script lang = "ts" setup name="Person">
    // ref 基本类型 和对象类型
    // reactive 对象，Proxy 原生代理，reactive 是深层次的
    //  情况四: 监视ref reactive 定义的对象类型数据中某个属性：
    //  注意：
    // （1）若该属性不是对象类型，需要写出函数形式
    // （2）若该属性依然是对象类型，可以直接编，也可以写出函数，不建议写出函数
    import { ref,reactive ,toRefs,computed,watch} from 'vue';
    // 数据
    let person=reactive({
        name:"张三",
        age:19,
        car:{
            c1:"奔驰",
            c2:"宝马"
        }
    })

    function changeName(){
        person.name +="~"
    }
    function changeAge(){
        person.age+=1
    }
    function changeFCar(){
        person.car.c1 = "奥迪"
    }
    function changeSCar(){
        person.car.c1 = "奥拓"
    }
    function changeCar(){
        person.car={c1:"小牛",c2:"九号"}
    }
   
    // watch(person,(newValue,oldValue)=>{
    //     console.log('person 变化',newValue,oldValue)
    // })

    // 如果只想监视某一个属性，需要写出函数
    // watch(()=>{return person.name},(newValue,oldValue)=>{
    //     console.log('person 姓名变化了',newValue,oldValue)
    // })

    // car 是对象
    // watch(person.car,(newValue,oldValue)=>{
    //     console.log('person car 变化了',newValue,oldValue)
    // })

    // 监视，情况四：监视响应式对象中的某个属性，且该属性是基本类型的，要写成函数式
    // 监视，情况四：监视响应式对象中的某个属性，且该属性是对象类型的，可以直接写，也能写函数，更推荐写函数
    // 结论：监视的要是对象里的属性，那么最好写函数式，注意点：若是对象监视的是地址值，需要关注对象内部，需要手动开启深度监视。
    // watch(()=>person.car,(newValue,oldValue)=>{
    //     console.log('person car 变化了',newValue,oldValue)
    // },{deep:true})    

    // 监视，情况五：监视上述的多个数据
    watch([()=>person.name,person.car],(newValue,oldValue)=>{
        console.log('person.car变化了',newValue,oldValue)
    },{deep:true})
</script>

<style scoped>
    .person{
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
    button{
        margin: 0 5px;
    }
    li{
        font-size: 20px;
    }
</style>